<template>
  <div class="tableCon">
    <div class="left">
      <div class="title">月度销售概览</div>
      <div class="navbar">
        <div class="start">
          <el-select size="mini" v-model="month1" placeholder="起始月份">
            <el-option
              v-for="item in tableData"
              :key="item.index"
              :label="item.month"
              :value="item.month"
            >
            </el-option>
          </el-select>
        </div>
        <div class="end">
          <el-select size="mini" v-model="month2" placeholder="结束月份">
            <el-option
              v-for="item in tableData"
              :key="item.index"
              :label="item.month"
              :value="item.month"
            >
            </el-option>
          </el-select>
        </div>
        <div class="render">
          <el-button size="mini" @click="renderList">查看详细</el-button>
        </div>
      </div>
      <div class="table" v-for="(item, index) in transData" :key="index">
        <el-table
          :border="true"
          :data="item.list"
          style="width: 100%"
          class="tableCol"
          :show-header="index === 0"
          show-summary
          :summary-method="getSummaries"
          :header-cell-style="addHeaderStyle"
          :span-method="objectSpanMethod"
        >
          <el-table-column prop="month" label="月份">
            <template scope="props">
              <a
                href="#"
                @click.prevent="navigator(props.row.month)"
                target="_blank"
                >{{ props.row.month }}</a
              >
            </template>
          </el-table-column>
          <el-table-column prop="cars" label="车型"></el-table-column>
          <el-table-column prop="sales" label="销售额"></el-table-column>
          <el-table-column prop="salesNum" label="销量"></el-table-column>
          <el-table-column prop="profit" label="利润"></el-table-column>
        </el-table>
      </div>
      <div class="sum_footer">
        <div class="sum_footer_unit">本页合计</div>
        <div class="sum_footer_unit"></div>
        <div class="sum_footer_unit">{{ getTotal("sales") }}</div>
        <div class="sum_footer_unit">{{ getTotal("salesNum") }}</div>
        <div class="sum_footer_unit">{{ getTotal("profit") }}</div>
      </div>
    </div>
    <div class="right">
      <div class="tableMini">
        <tableInfo
          v-if="isShow"
          :month="month"
          :key="timer"
          :month1="month1"
          :month2="month2"
        />
        <tableInfo2
          v-if="isShow2"
          :key="timer2"
          :month1="month1"
          :month2="month2"
        />
      </div>
      <my-echarts
        v-if="isShow || isShow2"
        class="echarts"
        :width="'98%'"
        :height="'45vh'"
        :option="option2"
      />
    </div>
  </div>
</template>

<script>
import myEcharts from './components/myEcharts.vue'
import tableInfo from './components/tableInfo.vue'
import tableInfo2 from './components/tableInfo2.vue'
export default {
  data () {
    return {
      month1: '',
      month2: '',
      timer: null,
      timer2: null,
      // 左侧表格数据
      tableData: [
        {
          month: '202301',
          cars: 'A',
          sales: '6451',
          salesNum: '5646',
          profit: '256'
        },
        {
          month: '202301',
          cars: 'B',
          sales: '64511',
          salesNum: '566',
          profit: '956'
        },
        {
          month: '202301',
          cars: 'C',
          sales: '6451',
          salesNum: '564',
          profit: '656'
        },
        {
          month: '202302',
          cars: 'A',
          sales: '4511',
          salesNum: '5646',
          profit: '656'
        },
        {
          month: '202302',
          cars: 'B',
          sales: '511',
          salesNum: '5648',
          profit: '7656'
        },
        {
          month: '202302',
          cars: 'C',
          sales: '511',
          salesNum: '56466',
          profit: '3356'
        },
        {
          month: '202303',
          cars: 'A',
          sales: '511',
          salesNum: '566',
          profit: '1656'
        },
        {
          month: '202303',
          cars: 'B',
          sales: '6511',
          salesNum: '564',
          profit: '6256'
        },
        {
          month: '202303',
          cars: 'C',
          sales: '4511',
          salesNum: '6646',
          profit: '556'
        }
      ],
      // 转化格式后数据
      transData: [],
      // 月份数组
      monthArr: [],
      isShow: false,
      isShow2: false,
      month: '',
      // 图表数据
      option2: {
        color: ['#5470C6', '#91CC75', '#EE6666'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        grid: {
          right: '20%'
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          data: ['销售额', '利润', '销量']
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            // prettier-ignore
            data: ['一月', '二月', '三月', '四月', '五月']
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '销售额',
            position: 'right',
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#5470C6'
              }
            },
            axisLabel: {
              formatter: '{value} 元'
            }
          },
          {
            type: 'value',
            name: '利润',
            position: 'right',
            alignTicks: false,
            offset: 80,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#91CC75'
              }
            },
            axisLabel: {
              formatter: '{value} 元'
            }
          },
          {
            type: 'value',
            name: '销量',
            position: 'left',
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#EE6666'
              }
            },
            axisLabel: {
              formatter: '{value} 件'
            }
          }
        ],
        series: [
          {
            name: '销售额',
            type: 'bar',
            data: [23.2, 25.6, 76.7, 135.6, 162.2]
          },
          {
            name: '利润',
            type: 'bar',
            yAxisIndex: 1,
            data: [26.4, 28.7, 70.7, 175.6, 182.2]
          },
          {
            name: '销量',
            type: 'line',
            yAxisIndex: 2,
            data: [6.3, 10.2, 20.3, 23.4, 23.0]
          }
        ]
      }
    }
  },
  components: {
    tableInfo,
    tableInfo2,
    myEcharts
  },
  created () {
    this.addMonthArr()
  },
  mounted () {
    // 转化表格数据格式
    this.tableData.forEach((item1) => {
      if (this.transData.length === 0) {
        this.transData.push({ month: item1.month, list: [item1] })
      } else {
        const res = this.transData.some((item) => {
          // 判断相同姓名，有就添加到当前项
          if (item.month === item1.month) {
            item.list.push(item1)
            return true
          }
          return null
        })
        if (!res) {
          // 如果没找相同姓名就添加一个新对象
          this.transData.push({ month: item1.month, list: [item1] })
        }
      }
    })
    console.log('转化数据', this.transData)
  },
  methods: {
    // 计算表格合计行
    getTotal (name) {
      let sum = 0
      this.tableData.forEach((n) => {
        sum += parseFloat(n[name])
      })
      return sum
    },
    // 把月份组成一个数组(暂时不用)
    addMonthArr () {
      const arr = []
      this.tableData.forEach((item) => {
        arr.push(item.month)
        this.monthArr = [...new Set(arr)]
      })
      console.log('数组', this.monthArr)
    },
    // 小计计算方法
    getSummaries (param) {
      // console.log('小计参数', param)
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        // 给第一列添加计算结果：**小计
        if (index === 0) {
          sums[index] = data[0].month.slice(-2) + '月小计'
        } else if (index > 0) {
          const values = data.map((item) => Number(item[column.property]))
          // 判断数组内元素是否都是数字
          if (!values.every((value) => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            sums[index] += ''
          } else {
            sums[index] = ''
          }
        }
      })
      return sums
    },
    // 合并月份单元格
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      // console.log('行', row, '列', column, '行号', rowIndex)
      if (columnIndex === 0) {
        if (rowIndex === 0) {
          return {
            rowspan: 3,
            colspan: 1
          }
        } else {
          return [0, 0]
        }
      }
    },
    // 按月份渲染列表
    renderList () {
      this.isShow = false
      this.isShow2 = true
      this.timer2 = new Date().getTime()
    },
    // 对表头添样式
    addHeaderStyle ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background:rgb(204, 225, 255);'
      }
    },
    // a标签添加方法
    navigator (val) {
      this.isShow2 = false
      this.isShow = true
      this.month = val
      this.timer = new Date().getTime()
      console.log('a标签', val, this.month)
    }
  }
}
</script>

<style lang="less" scoped>
.tableCon {
  width: 100%;
  height: 100vh;
  display: flex;
  background-color: rgb(241, 241, 241);
  .left {
    width: 40%;
    // height: 100%;
    background-color: #fff;
    margin: 10px;
    .title {
      height: 30px;
      font-size: 22px;
    }
    .navbar {
      margin: 0 5px;
      display: flex;
      justify-content: space-between;
      .start {
        width: 100px;
      }
      .end {
        width: 100px;
      }
    }
    .sum_footer {
      background-color: skyblue;
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 40px;
      overflow: visible;
      .sum_footer_unit {
        width: 85px;
        flex-shrink: 0;
        font-size: 13px;
        font-weight: 800;
        color: #606266;
        padding: 0 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        word-break: break-word;
        border-bottom: 1px solid #ebeef5;
        border-right: 1px solid #ebeef5;
        border-top: 1px solid #ebeef5;
        text-align: center;
      }
    }
  }
  .right {
    width: 66%;
    height: 100vh;
    .tableMini {
      height: 40%;
      margin: 10px;
      background-color: #fff;
    }
    .echarts {
      // width: 100%;
      height: 400px;
      margin: 10px;
      background-color: #fff;
    }
  }
}
.warningRow {
  background: rgb(92, 89, 228);
}

.el-table .success-row {
  background: #a7e585;
}
</style>
